<!-- 故障报修 -->
<template>
	<view class="menu-dom">
		<uni-grid :column="2" :showBorder="false" :square="false">
			<uni-grid-item v-for="(item,index) in tridingList" :key="index">
				<navigator :url="item.url"  hover-class="none">
					<view class="grid-item-box">
						<image :src="item.icon" mode="heightFix" style="height: 80rpx;"></image>
						<view class="title">{{item.title}}</view>
						<view class="desc">{{item.desc}}</view>
					</view>
				</navigator>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script setup lang="ts">
	const tridingList = [
		{
			title: '故障报修',
			desc: '故障报修',
			key: 'trading-repair',
			url: '/pages/bspsd/business/trading/add',
			icon: '/static/icon/dzfp.png',
		},
		{
			title: '报修记录查询',
			desc: '用户故障报修记录查询',
			key: 'trading-query',
			url: '/pages/bspsd/business/trading/query',
			icon: '/static/icon/dzfp.png',
		}
	]
</script>

<style lang="scss" scoped>
	.menu-dom {
		text-align: center;
		color: #646566;
		line-height: 1.5;
		font-size: 14px;

		.grid-item-box {
			margin: 10px;
			padding: 10px 0;
			background: #fff;
			border-radius: 8px;

			.title {
				font-size: 36rpx;
				color: #4c4c4c;
			}

			.desc {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
</style>